import React, { useState, useEffect, useReducer, useRef, useCallback } from 'react';

import Testcode from './testcode';

import styles from './index.less';

import {
  Form,
  Input,
  Divider,
  Row,
  Col,
  Select,
  Cascader
} from 'antd';
import useWinSize from './webSoket/winsize';
const { Option } = Select;

let arr: object[] = [];
console.log("arr", arr);

arr.forEach(item => {
  console.log("item", item);
});
for (let index = 0; index < arr.length; index++) {
  const element = arr[index];
  console.log("element",element)
};
let bul = {a:1}, ooe = {a: 1};
console.log("is",Object.is(bul, ooe));
// 省级市
const residences = [
  {
    value: '北京市',
    label: '北京市',
    children: [
      {
        value: '大兴区',
        label: '大兴区',
        children: [
          {
            value: '荣京东街',
            label: '荣京东街',
          },
        ],
      },
    ],
  },
  {
    value: '广东省',
    label: '广东省',
    children: [
      {
        value: '广州市',
        label: '广州市',
        children: [
          {
            value: '白云区',
            label: '白云区',
          },
        ],
      },
    ],
  },
];

export default function FormName(props: any) {
  const ref = useRef<any>();
  const [str] = useState("互联网普通专线(全国版)");
  const [num, setNum] = useState(0);
  const [count, setCount] = useState(0);
  // 使用hook自定义组件
  const [form] = Form.useForm();

  useEffect(() => {
    // 相当于 componentDidMount 和 componentDidUpdate
  }, [])
  /*
    第二个参数[]：传入一个代表只会运行一次effect（仅在挂载和卸载执行），
    不会依赖props和state中的任何值，effect内部的props和state的值永远都为初始值
  */

  const win = useWinSize();
  console.log(win)
  // 请选择业务模式
  const  onbusinessmodeChange = useCallback((value: string) => {
    console.log(value);
    ref.current.onchange();
  },[]);
  // 请选择业务子类型
  const onbusinesstypeChange = (value: string) => {
    console.log(value);
  }
  // 请选择使用类型
  const onusetypeChange = (value: string) => {
    console.log(value);
  }
  // 使用用途
  const onusebehoofChange = (value: string) => {
    console.log(value);
  }
  // 是否IDC外拉
  const onisidcChange = (value: string) => {
    console.log(value);
  }
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  const getChildrenValue = (val: number) => {
    console.log("val", val)
    setCount(val)
  }
  const onchange = (val:any) => {
    console.log("val", val)
    setNum(num + 1);
  }
  return (
    <div className={styles.box}>
      <span>{num}</span>
      <div className={styles.content}>
        <div className={styles.title}>{str}</div>
        <Divider />
        <div className={styles.box_form}>
          <Form
            name="control-hooks"
            form={form}
            colon={false}
            labelCol={{
              span: 4,
            }}
            wrapperCol={{
              span: 16,
            }}
            labelWrap
            initialValues={{
              remember: true,
              installsite: ['广东省', '广州市', '白云区'],
              prefix: '86'
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Row>
              <Col span={8}>
                <Form.Item
                  label="业务模式"
                  name="businessmode"
                  rules={[
                    {
                      required: true,
                      message: '请选择业务模式!',
                    },
                  ]}
                >
                  <Select
                    placeholder="请选择业务模式"
                    onChange={onbusinessmodeChange}
                    allowClear
                  >
                    <Option value="male">国内业务</Option>
                    <Option value="female">国外业务</Option>
                  </Select>
                </Form.Item>
                <Form.Item name="installsite" label="装机地址" rules={[{
                  type: 'array',
                  required: true,
                  message: '请选择装机地址'
                },]}>
                  <Cascader options={residences} />
                </Form.Item>
                <Form.Item
                  label="楼宇编码"
                  name="towercode"
                >
                  <Input placeholder='请输入楼宇编码' />
                </Form.Item>
                <Form.Item
                  label="落地客户联系人/联系电话"
                  name="nameoriphon"
                >
                  <Input placeholder='请输入联系人' />
                </Form.Item>
                <Form.Item
                  label="一站式业务信息ID"
                  name="messageid"
                >
                  <Input placeholder='请输入一站式业务信息' disabled />
                </Form.Item>
                <Form.Item
                  label="是否开通80端口"
                  name="isopenport"
                  required
                >
                  <Input placeholder='80' disabled />
                </Form.Item>
                <Form.Item
                  label="发起方客户经理电话"
                  name="sponsor"
                >
                  <Input placeholder='请输入发起方客户经理电话' />
                </Form.Item>

              </Col>
              <Col span={8}>
                <Form.Item
                  label="业务子类型"
                  name="businesstype"
                  rules={[
                    {
                      required: true,
                      message: '请选择业务子类型',
                    },
                  ]}
                >
                  <Select
                    placeholder="请选择业务子类型"
                    onChange={onbusinesstypeChange}
                    allowClear
                  >
                    <Option value="male">普通互联网专线</Option>
                    <Option value="female">vip互联网专线</Option>
                  </Select>
                </Form.Item>
                <Form.Item label="" name="emty">
                  <Input className={styles.form_input} disabled placeholder='请选择' />
                </Form.Item>
                <div className={styles.form_confirm}>
                  <div className={styles.form_clear}>
                    <span>选择</span>
                    <span>清除</span>
                  </div>
                </div>
                <Form.Item
                  name="towername"
                  label="楼宇名称"
                >
                  <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item
                  name="standardsite"
                  label="标准地址ID"
                >
                  <Input placeholder='请输入' disabled />
                </Form.Item>
                <Form.Item
                  name="circuitcode"
                  label="电路代号"
                >
                  <Input placeholder='请输入' disabled />
                </Form.Item>
                <Form.Item
                  name="usetype"
                  label="使用类型"
                >
                  <Select
                    placeholder="请选择使用类型"
                    onChange={onusetypeChange}
                    allowClear
                  >
                    <Option value="male">客户付费</Option>
                    <Option value="female">非客户付费</Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  name="portbandwidth"
                  label="端口带宽"
                  initialValue="male"
                  required
                >
                  <Select
                    disabled
                  >
                    <Option value="male">1MBPS</Option>
                    <Option value="female">10MBPS</Option>
                  </Select>
                </Form.Item>
                <Form.Item
                  name="usebehoof"
                  label="使用用途"
                  initialValue="1"
                  rules={[{ required: true, message: "请选择使用用途" }]}
                >
                  <Select
                    onChange={onusebehoofChange}
                  >
                    <Option value="1">接入自用</Option>
                    <Option value="2">别人用</Option>
                  </Select>
                </Form.Item>
                <Form.Item
                  name="provincecode"
                  label="省份楼宇编码"
                >
                  <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item
                  name=" businessprocess"
                  label="一站式业务流水号"
                >

                  <Input placeholder='请输入' disabled />
                </Form.Item>
                <Form.Item
                  name="isidc"
                  label="是否IDC外拉"
                  initialValue="2"
                  rules={[{ required: true, message: "请选择是否为IDC外拉" }]}
                >
                  <Select
                    onChange={onisidcChange}
                  >
                    <Option value="1">是</Option>
                    <Option value="2">否</Option>
                  </Select>
                </Form.Item>
                <Form.Item
                  name="contractperiod"
                  label="合同期限(月)"
                  rules={[{ required: true, message: "请输入合同期限" }]}
                >
                  <Input placeholder='请输入' />
                </Form.Item>
                {/* <Form.Item
                  wrapperCol={{
                    offset: 5,
                    span: 16,
                  }}
                >
                  <Button type="primary" htmlType="submit">
                    提交
                  </Button>
                </Form.Item> */}
              </Col>
            </Row>
          </Form>
        </div>
      </div>

      <div className={styles.test_code}>
        <Testcode parent={str} getVal={getChildrenValue} change={onchange} ref={ref}/>
      </div>

    </div>
  );
}


